<script setup>
import {ref, toRef, toRefs, watch} from 'vue'
import MarkdownIt from "markdown-it";
import markdownItKatex from "markdown-it-katex";

const props = defineProps({
  articleContent: {
    type: String,
    required: true,
    default: ''
  }
})

const {articleContent} = toRefs(props)

const md = new MarkdownIt()
md.use(markdownItKatex)

const html = ref('')
const convertToHTML = () => {
  html.value = md.render(articleContent.value)
}

watch(articleContent, convertToHTML)
</script>

<template>
  <div class="display-html" v-html="html"></div>
</template>

<style lang="scss" scoped>
.display-html {
  margin-top: .5rem;
  background-color: #ffffff;
  padding: .5rem .5rem;
}
</style>